import { Graph } from '@antv/x6';
import { truncate } from 'lodash';
import { createApp, defineComponent, onMounted, onUnmounted, PropType, ref, watch } from 'vue';
import { getMindmapData, getModelCells } from './modelData';
import EntityLable from './EntityLable';
import { TeleportContainer } from './registerNode';

export default defineComponent({
  name: 'ModelGraph',
  props: {
    treedata: Object as PropType<any>
  },
  emits: ['removeEvent', 'editEvent'],
  setup: (props, { emit }) => {
    const domRef = ref();
    // todo: 是否需要 ref
    const graphContext = ref();

    const initGraph = () => {
      if (domRef.value && !graphContext.value) {
        graphContext.value = new Graph({
          container: domRef.value,
          autoResize: true,
          // autoResize: document.body,
          grid: {
            size: 10,
            visible: true,
            type: 'dot', // 'dot' | 'fixedDot' | 'mesh'
            args: {
              color: '#a05410', // 网格线/点颜色
              thickness: 1, // 网格线宽度/网格点大小
            },
          },
          interacting: {
            nodeMovable: false,
          },
          panning: {
            enabled: true,
            eventTypes: ['leftMouseDown', 'mouseWheel'],
          },
          mousewheel: {
            enabled: true,
            modifiers: 'ctrl',
            factor: 1.1,
            maxScale: 1.5,
            minScale: 0.5,
          },
          // scroller: true,
          onEdgeLabelRendered: (args) => {
            const { selectors, edge: { data: { target } } } = args
            const content = selectors.foContent as HTMLDivElement
            if (content) {
              const app = createApp(<EntityLable data={target}  />);
              try {
                setTimeout(() => {
                  app.mount(content)
                }, 300)
              } catch (e) {
                console.log(e);
              }
              // ReactDOM.render(<Label />, content)
            }
          },
        })
        graphContext.value.fromJSON({ nodes: [], edges: [] })
      }
    }
    onMounted(() => {
      initGraph()
    })
    onUnmounted(() => {
      graphContext.value.dispose()
    })
    const onRemoveEvent = (data: defs.DataModelRelationVo) => {
      emit('removeEvent', data)
    }
    const onEditEvent = (data: defs.DataModelRelationVo) => {
      emit('editEvent', data)
    }
    watch(() => props.treedata, () => {
      if (props.treedata && props.treedata.id) {
        const models = getModelCells(props.treedata, onRemoveEvent, onEditEvent);
        if (graphContext.value) {
          graphContext.value.fromJSON(models)
          setTimeout(() => {
            graphContext.value.positionPoint({ x: models?.nodes?.[0]?.x, y: models?.nodes?.[0]?.y }, 10, '50%')
          }, 100)
        }
      }
    })

    return () => {
      return (
        <>
          <TeleportContainer />
          <div ref={domRef} style={{ flex: 1, width: '100%', height: '100%' }}></div>
        </>
      )
    }
  }
})
